<template>
  <el-dialog :model-value="visible" :title="props.infoid ? '编辑员工' : '创建员工'" width="70%" top="5vh" @close="cancel" append-to-body>
    <!-- 基础档案 -->
    <!--  -->

    <div class="boardBox">
      <div class="tishi">员工创建之后，手机号作为员工登录账号，新注册用户密码发送至注册手机上，若已注册，密码为 “牛域网 APP” 账号密码</div>

      <el-form label-width="180px" style="width: 100%" :rules="rules" ref="queryForm" :model="formObj">
        <div class="flex box-row-column">
          <div class="dialog_header mt20">
            <div class="dialog_header_title flex-1">个人信息</div>
            <div v-if="isedit && !iswanshan">
              <el-button size="small" @click="perdisabled(true)" v-if="!peristrue">编辑</el-button>
              <div v-else>
                <el-button color="#01509f" type="primary" @click="Saveperson" size="small">保存</el-button>
                <el-button size="small" @click="perdisabled(false)">取消</el-button>
              </div>
            </div>
          </div>
          <uploadcard @getimgurl="getimgurl" :dataurl="dataurl" ref="childRef" :peristrue="!peristrue"></uploadcard>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="员工姓名：" prop="name">
                <el-input v-model="formObj.name" placeholder="员工姓名" clearable :disabled="!peristrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别：" prop="sex" >
                <el-radio-group v-model="formObj.sex" class="ml-4" style="width: 240px" :disabled="!peristrue">
                  <el-radio label="0" size="small">男</el-radio>
                  <el-radio label="1" size="small">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="出生年月：" prop="birthday">
                <el-date-picker
                  v-model="formObj.birthday"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                  style="width: 100%"
                  :default-value="new Date(1990, 1, 1)"
                  :disabled="!peristrue"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族：">
                <el-input v-model="formObj.nation" placeholder="民族" clearable :disabled="!peristrue" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="政治面貌：">
                <el-select v-model="formObj.political" placeholder="选择政治面貌" :disabled="!peristrue">
                  <el-option v-for="item in politicaloptions" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="婚姻状况：">
                <el-select v-model="formObj.marital" placeholder="选择婚姻状况" :disabled="!peristrue">
                  <el-option v-for="item in optionsmarital" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="身份证号：" prop="id_card">
                <el-input v-model="formObj.id_card" placeholder="身份证号" clearable :disabled="!peristrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证有效期：" prop="IdCardTimestart">
                <div class="flex">
                  <el-date-picker v-model="formObj.IdCardTimestart" value-format="YYYY-MM-DD" type="date" placeholder="选择日期" :size="size" style="width: 45%" :disabled="!peristrue" />
                  <span class="ml10 mr10">-</span>
                  <el-date-picker v-model="formObj.IdCardTimeend" value-format="YYYY-MM-DD" type="date" placeholder="选择日期" :size="size" style="width: 45%" :disabled="!peristrue" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="家庭住址：" prop="family_address">
                <el-input v-model="formObj.family_address" placeholder="家庭住址" clearable :disabled="!peristrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍类型：" prop="census_register">
                <el-select v-model="formObj.census_register" placeholder="选择" :disabled="!peristrue">
                  <el-option v-for="item in census_registeroptions" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="现住地址：" prop="domicile_address">
                <el-input v-model="formObj.domicile_address" placeholder="现住地址" :disabled="!peristrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码：" prop="mobile">
                <el-input v-model="formObj.mobile" placeholder="手机号码" :disabled="props.infoid" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="身高：">
                <div style="display: flex">
                  <el-input v-model="formObj.height" placeholder="身高" :disabled="!peristrue" />
                  <div class="xuanzzi" style="width: 20%; margin-left: 10px">cm</div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="体重：">
                <div style="display: flex">
                  <el-input v-model="formObj.weight" placeholder="体重" :disabled="!peristrue" />
                  <div class="xuanzzi" style="width: 20%; margin-left: 10px">KG</div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="flex box-row-column">
          <div class="dialog_header mt20">
            <div class="dialog_header_title2 flex-1">紧急联系人</div>
            <div v-if="isedit && !iswanshan">
              <el-button size="small" @click="lxrdisabled(true)" v-if="!lxristrue">编辑</el-button>
              <div v-else>
                <el-button color="#01509f" type="primary" @click="Saveurgent" size="small">保存</el-button>
                <el-button size="small" @click="lxrdisabled(false)">取消</el-button>
              </div>
            </div>
          </div>

          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="紧急联系人：" prop="urgentman">
                <el-input v-model="formObj.urgentman" placeholder="紧急联系人" clearable style="width: 240px" :disabled="!lxristrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关系：" prop="relationship">
                <el-input v-model="formObj.relationship" placeholder="紧急联系人关系" clearable style="width: 240px" :disabled="!lxristrue" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="联系方式：" prop="urgentmobile">
                <el-input v-model="formObj.urgentmobile" placeholder="联系方式" clearable style="width: 240px" :disabled="!lxristrue" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="flex box-row-column">
          <div class="dialog_header mt20">
            <div class="dialog_header_title3 flex-1">工资卡信息</div>

            <div v-if="isedit && !iswanshan">
              <el-button size="small" @click="gzkdisabled(true)" v-if="!gzkistrue">编辑</el-button>
              <div v-else>
                <el-button color="#01509f" type="primary" @click="Savesalary" size="small">保存</el-button>
                <el-button size="small" @click="gzkdisabled(false)">取消</el-button>
              </div>
            </div>
          </div>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="工资卡卡号：">
                <el-input v-model="formObj.salary_card" placeholder="工资卡卡号" clearable style="width: 240px" :disabled="!gzkistrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行：">
                <el-input v-model="formObj.opening_bank" placeholder="开户行" clearable :disabled="!gzkistrue" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="flex box-row-column" v-if="!iswanshan">
          <div class="dialog_header mt20">
            <div class="dialog_header_title4 flex-1">入职信息</div>
            <div v-if="isedit && !iswanshan">
              <el-button size="small" @click="rzdisabled(true)" v-if="!rzistrue">编辑</el-button>
              <div v-else>
                <el-button color="#01509f" type="primary" @click="Savejobinfo" size="small">保存</el-button>
                <el-button size="small" @click="rzdisabled(false)">取消</el-button>
              </div>
            </div>
          </div>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="入职时间：" prop="hired_time">
                <el-date-picker
                  v-model="formObj.hired_time"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                  style="width: 100%"
                  :disabled-date="pickerOptionsrz"
                  :disabled="!rzistrue"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用工模式：" prop="job_mode">
                <el-select v-model="formObj.job_mode" placeholder="用工模式" style="width: 100%" :disabled="!rzistrue">
                  <el-option v-for="item in job_modeoptions" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="部门：" prop="dept_id">
                <!-- <el-select v-model="formObj.job_mode" placeholder="部门" style="width: 240px">
                  <el-option v-for="item in deptoptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select> -->
                <el-cascader style="width: 100%" :options="deptoptions" :props="props1" clearable v-model="formObj.dept_id" @change="handleChange" ref="selectedArrRef" :disabled="!rzistrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位：">
                <el-input v-model="formObj.position" placeholder="岗位" clearable :disabled="!rzistrue" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="试用期薪资：" prop="probation_salary">
                <el-input v-model="formObj.probation_salary" placeholder="试用期薪资" clearable :disabled="!rzistrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="转正薪资：" prop="become_salary">
                <el-input v-model="formObj.become_salary" placeholder="转正薪资" clearable :disabled="!rzistrue" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="试用期：" prop="labortrial">
                <el-select v-model="formObj.labortrial" placeholder="试用期" style="width: 100%" :disabled="!rzistrue">
                  <el-option v-for="item in labortrialoptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="劳动合同期：" prop="laborType">
                <el-input v-if="formObj.laborTypename === '自定义合同期限'" v-model="formObj.laborType" placeholder="劳动合同期" clearable :disabled="!rzistrue" />
                <el-select v-model="formObj.laborType" placeholder="劳动合同期" style="width: 100%" v-else @change="getlaborTypename" :disabled="!rzistrue">
                  <el-option v-for="item in laborTypeoptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="劳动合同开始时间：" prop="labor_start">
                <el-date-picker :disabled="!rzistrue" v-model="formObj.labor_start" :disabled-date="pickerOptions" value-format="YYYY-MM-DD" type="date" placeholder="选择日期" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="劳动合同结束时间：" prop="labor_end">
                <el-date-picker :disabled="!rzistrue" v-model="formObj.labor_end" :disabled-date="pickerOptions" value-format="YYYY-MM-DD" type="date" placeholder="选择日期" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="mt20">
            <el-col :span="12">
              <el-form-item label="企业邮箱：">
                <el-input v-model="formObj.email" placeholder="企业邮箱" clearable :disabled="!rzistrue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工状态：" prop="job_status">
                <el-select v-model="formObj.job_status" placeholder="员工状态" style="width: 100%" :disabled="!rzistrue">
                  <el-option v-for="item in jobstatusoptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>

    <span slot="footer" class="dialog-footer mt20" style="text-align: right">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" color="#01509f" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, nextTick } from "@/TUIKit/adapter-vue";
  import uploadcard from "./uploadcard.vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { save_urgent, getpolitical, getmarital, getjobmode, getDepartmentlist, saveyuangong, save_person, save_salary, save_jobinfo, user_info, ocr, save_info } from "@/api/cf";
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    isedit: {
      type: Boolean,
      default: false,
    },
    infoid: {
      type: Number,
      default: 0,
    },
    iswanshan: {
      type: Boolean,
      default: false,
    },
  });

  const formObj = ref({
    IdCardFaceImg: "",
    IdCardBackImg: "",
    name: "",
    birthday: "",
    sex: "",
    nation: "",
    marital: "",
    political: "",
    census_register: "",
    id_card: "",
    IdCardTimestart: "",
    IdCardTimeend: "",
    family_address: "",
    domicile_address: "",
    weight: "",
    height: "",
    urgentman: "",
    urgentmobile: "",
    relationship: "",
    salary_card: "",
    opening_bank: "",
    hired_time: "",
    job_mode: "",
    dept_id: "",
    probation_salary: "",
    become_salary: "",
    job_status: null,
    labor_start: "",
    labor_end: "",
    labortrial: null,
    laborType: null,
    position: "",
    email: "",
    mobile: "",
  });
  const initialFormObj = {
    IdCardFaceImg: "",
    IdCardBackImg: "",
    name: "",
    birthday: "",
    sex: "",
    nation: "",
    marital: "",
    political: "",
    census_register: "",
    id_card: "",
    IdCardTimestart: "",
    IdCardTimeend: "",
    family_address: "",
    domicile_address: "",
    weight: "",
    height: "",
    urgentman: "",
    urgentmobile: "",
    relationship: "",
    salary_card: "",
    opening_bank: "",
    hired_time: "",
    job_mode: "",
    dept_id: "",
    probation_salary: "",
    become_salary: "",
    job_status: null,
    labor_start: "",
    labor_end: "",
    labortrial: null,
    laborType: null,
    position: "",
    email: "",
    mobile: "",
  };

  const peristrue = ref(true);
  const lxristrue = ref(true);
  const gzkistrue = ref(true);
  const rzistrue = ref(true);

  const props1 = reactive({
    checkStrictly: true,
    emitPath: false,
    multiple: false,
    value: "id",
    label: "name",
    children: "children",
  });
  const rules = reactive({
    name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
    sex: [{ required: true, message: "请选择性别", trigger: "change" }],
    birthday: [{ required: true, message: "请输入选择出生年月", trigger: "change" }],
    id_card: [
      { required: true, message: "请输入身份证号", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          // 身份证号格式校验（18位）
          const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
          if (!idCardRegex.test(value)) {
            callback(new Error("请输入正确的18位身份证号"));
          } else {
            callback(); // 校验通过
          }
        },
        trigger: "blur", // 失去焦点时触发
      },
    ],
    // date1: [{ required: true, message: "请选择身份证有效期", trigger: "change" }],
    census_register: [{ required: true, message: "请选择户籍类型", trigger: "change" }],
    family_address: [{ required: true, message: "请输入家庭地址", trigger: "blur" }],
    domicile_address: [{ required: true, message: "请输入现住地址", trigger: "blur" }],
    urgentman: [{ required: true, message: "请输入紧急联系人", trigger: "blur" }],
    urgentmobile: [{ required: true, message: "请输入紧急联系人联系方式", trigger: "blur" }],
    hired_time: [{ required: true, message: "请选择入职时间", trigger: "change" }],
    job_mode: [{ required: true, message: "请选择用工模式", trigger: "change" }],
    dept_id: [{ required: true, message: "请选择部门", trigger: "change" }],
    probation_salary: [{ required: true, message: "请输入试用薪资", trigger: "blur" }],
    become_salary: [{ required: true, message: "请输入转正薪资", trigger: "blur" }],
    labortrial: [{ required: true, message: "请选择试用期", trigger: "change" }],
    laborType: [{ required: true, message: "请选择劳动合同期", trigger: "change" }],
    mobile: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
    relationship: [{ required: true, message: "请输入关系", trigger: "blur" }],
    job_status: [{ required: true, message: "请选择员工状态", trigger: "change" }],
    labor_start: [{ required: true, message: "请选择劳动合同开始时间", trigger: "change" }],
    labor_end: [{ required: true, message: "请选择劳动合同开始时间", trigger: "change" }],
    IdCardTimestart: [{ required: true, message: "请选择身份证有效期", trigger: "change" }],
    IdCardTimeend: [{ required: true, message: "请选择身份证有效期", trigger: "change" }],
  });

  const childRef = ref(null);
  // 定义重置函数
  function resetForm() {
    formObj.value = { ...initialFormObj };

    dataurl.value.url1 = "";
    dataurl.value.url2 = "";

    nextTick(() => {
      if (childRef.value) {
        childRef.value.childMethod(); // 直接调用子组件方法
      }
    });
  }
  const emit = defineEmits<{
    (event: "update:visible", value: boolean): void;
    (event: "update:isedit", value: boolean): void;
    (event: "chananniu", value: ""): void;
    (event: "success", value: ""): void;
  }>();
  const options = ref([
    { value: "option1", label: "选项一" },
    { value: "option2", label: "选项二" },
    { value: "option3", label: "选项三" },
    { value: "option4", label: "选项四" },
  ]);
  const jobstatusoptions = ref([
    { value: 1, name: "试用" },
    { value: 2, name: "正式" },
    { value: 3, name: "离职中" },
  ]);
  const laborTypeoptions = ref([
    { value: 0, name: "无固定期限" },
    { value: 1, name: "6个月" },
    { value: 2, name: "12个月" },
    { value: 3, name: "24个月" },
    { value: 4, name: "36个月或以上" },
    { value: 5, name: "自定义合同期限" },
  ]);
  const labortrialoptions = ref([
    { value: 0, name: "无试用期" },
    { value: 1, name: "1个月" },
    { value: 2, name: "2个月" },
    { value: 3, name: "3个月" },
    { value: 4, name: "4个月" },
    { value: 5, name: "5个月" },
    { value: 6, name: "6个月" },
  ]);
  const deptoptions = ref([]);
  const job_modeoptions = ref([]);
  const census_registeroptions = ref(["本地城镇", "本地农村", "外地城镇", "外地农村"]);
  const politicaloptions = ref([]);
  const optionsmarital = ref(["已婚", "未婚", "离异"]);

  const childref = ref(null);
  // 监听 localValue 的变化，通知父组件更新值
  watch(
    () => props.visible,
    newValue => {
      if (newValue) {
        resetForm(); // 重置表单

        peristrue.value = true;
        lxristrue.value = true;
        gzkistrue.value = true;
        rzistrue.value = true;

        getpolitical().then(res => {
          politicaloptions.value = res.data;
        });
        //获取婚姻状况
        getmarital().then(res => {
          optionsmarital.value = res.data;
        });
        getjobmode().then(res => {
          job_modeoptions.value = res.data;
        });
        getDepartmentlist().then(res => {
          deptoptions.value = res.data;
        });

        if (props.infoid) {
          user_info(props.infoid).then(res => {
            formObj.value = res.data;
            dataurl.value.url1 = formObj.value.IdCardFaceImg;
            dataurl.value.url2 = formObj.value.IdCardBackImg;
            formObj.value.sex = formObj.value.sex.toString();
            /// console.log("dataurl", dataurl.value);
          });
        }
      } else {
        props.isedit = false;
      }
    }
  );

  const dataurl = ref({ url1: "", url2: "" });
  // watch(
  //   () => props.infoid,
  //   newValue => {
  //     console.log("infoid222222", newValue);
  //     setTimeout(() => {
  //       if (newValue) {
  //         user_info(props.infoid).then(res => {
  //           formObj.value = res.data;
  //           dataurl.value.url1 = formObj.value.IdCardFaceImg;
  //           dataurl.value.url2 = formObj.value.IdCardBackImg;
  //           formObj.value.sex = formObj.value.sex.toString();
  //           /// console.log("dataurl", dataurl.value);
  //         });
  //       }
  //     }, 1000);
  //   },
  //   {
  //     immediate: true,
  //     deep: true,
  //   }
  // );
  const pickerOptionsrz = (time: Date) => {
    const today = new Date();
    return time.getTime() >= today; //时间范围必须是时间戳
  };
  const pickerOptions = (time: Date) => {
    const specificDate = new Date(formObj.value.hired_time);
    return time.getTime() < specificDate - 24 * 60 * 60 * 1000; //时间范围必须是时间戳
  };

  function perdisabled(a) {
    peristrue.value = a;
  }

  function lxrdisabled(a) {
    lxristrue.value = a;
  }

  function gzkdisabled(a) {
    gzkistrue.value = a;
  }

  function rzdisabled(a) {
    rzistrue.value = a;
  }
  //保存个人信息
  function Saveperson() {
    queryForm.value.validateField(["name", "sex", "birthday", "id_card", "census_register", "family_address", "domicile_address", "mobile"], res => {
      if (res) {
        console.log("表单验证成功");
        const data = {
          IdCardFaceImg: formObj.value.IdCardFaceImg,
          IdCardBackImg: formObj.value.IdCardBackImg,
          name: formObj.value.name,
          birthday: formObj.value.birthday,
          sex: Number(formObj.value.sex),
          nation: formObj.value.nation,
          marital: formObj.value.marital,
          political: formObj.value.political,
          census_register: formObj.value.census_register,
          id_card: formObj.value.id_card,
          IdCardTimestart: formObj.value.IdCardTimestart,
          IdCardTimeend: formObj.value.IdCardTimeend,
          family_address: formObj.value.family_address,
          domicile_address: formObj.value.domicile_address,
          weight: formObj.value.weight,
          height: formObj.value.height,
          id: props.infoid,
          mobile: formObj.value.mobile,
        };

        save_person(data)
          .then(res => {
            ElMessage({
              message: "保存成功",
              grouping: true,
              type: "success",
            });
            //  emit("update:visible", false);
            emit("update:isedit", false);
            emit("success", "");
            // resetForm(); // 重置表单
          })
          .catch(err => {
            ElMessage({
              message: err,
              grouping: true,
              type: "error",
            });
          });
      } else {
        console.log("表单验证失败");
        return false;
      }
    });
  }

  //保存联系人
  function Saveurgent() {
    queryForm.value.validateField(["urgentman", "urgentmobile", "relationship"], res => {
      if (res) {
        console.log("表单验证成功");
        const data = {
          urgentman: formObj.value.urgentman,
          urgentmobile: formObj.value.urgentmobile,
          relationship: formObj.value.relationship,
          id: props.infoid,
        };
        save_urgent(data)
          .then(res => {
            ElMessage({
              message: "保存成功",
              grouping: true,
              type: "success",
            });
            // emit("update:visible", false);
            emit("update:isedit", false);
            emit("success", "");
            // resetForm(); // 重置表单
          })
          .catch(err => {
            ElMessage({
              message: err,
              grouping: true,
              type: "error",
            });
          });
      } else {
        console.log("表单验证失败");
        return false;
      }
    });
  }

  //保存银行卡
  function Savesalary() {
    const data = {
      salary_card: formObj.value.salary_card,
      opening_bank: formObj.value.opening_bank,
      id: props.infoid,
    };
    save_salary(data)
      .then(res => {
        ElMessage({
          message: "保存成功",
          grouping: true,
          type: "success",
        });
        //  emit("update:visible", false);
        emit("update:isedit", false);
        emit("success", "");
        // resetForm(); // 重置表单
      })
      .catch(err => {
        ElMessage({
          message: err,
          grouping: true,
          type: "error",
        });
      });
  }

  //保存入只信息
  function Savejobinfo() {
    queryForm.value.validateField(["hired_time", "job_mode", "dept_id", "probation_salary", "become_salary", "labortrial", , "job_status", "laborType"], res => {
      if (res) {
        console.log("表单验证成功");
        const data = {
          hired_time: formObj.value.hired_time,
          job_mode: formObj.value.job_mode,
          dept_id: formObj.value.dept_id,
          probation_salary: formObj.value.probation_salary,
          become_salary: formObj.value.become_salary,
          job_status: formObj.value.job_status,
          labor_start: formObj.value.labor_start,
          labor_end: formObj.value.labor_end,
          labortrial: formObj.value.labortrial,
          laborType: formObj.value.laborType,
          position: formObj.value.position,
          email: formObj.value.email,
          id: props.infoid,
        };
        save_jobinfo(data)
          .then(res => {
            ElMessage({
              message: "保存成功",
              grouping: true,
              type: "success",
            });
            //  emit("update:visible", false);
            emit("update:isedit", false);
            emit("success", "");
            // resetForm(); // 重置表单
          })
          .catch(err => {
            ElMessage({
              message: err,
              grouping: true,
              type: "error",
            });
          });
      } else {
        console.log("表单验证失败");
        return false;
      }
    });
  }

  function getlaborTypename(val) {
    const result = laborTypeoptions.value.find(item => item.value === val);
    formObj.value.laborTypename = result.name;
  }
  function getimgurl(data, a) {
    if (a == 1) {
      formObj.value.IdCardFaceImg = data.url1 ? data.url1 : "";
    } else {
      formObj.value.IdCardBackImg = data.url2 ? data.url2 : "";
    }
    const info = {
      url: a == 1 ? data.url1 : data.url2,
    };
    ocr(info)
      .then(res => {
        //  console.log(res.data, "sgsgsgsg");
        if (res.data.name) {
          formObj.value.birthday = res.data.birthday ? res.data.birthday : "";
          formObj.value.id_card = res.data.id_card ? res.data.id_card : "";
          formObj.value.family_address = res.data.family_address ? res.data.family_address : "";
          formObj.value.nation = res.data.nation ? res.data.nation : "";
          formObj.value.name = res.data.name ? res.data.name : "";
          formObj.value.sex = res.data.sex ? res.data.sex.toString() : "";
        }

        if (res.data.IdCardTimestart) {
          formObj.value.IdCardTimestart = res.data.IdCardTimestart ? res.data.IdCardTimestart : "";
          formObj.value.IdCardTimeend = res.data.IdCardTimeend ? res.data.IdCardTimeend : "";
        }
      })
      .catch(err => {
        ElMessage({
          message: err,
          grouping: true,
          type: "error",
        });
      });
  }

  const selectedArrRef = ref(null);
  function handleChange(value) {
    selectedArrRef.value.togglePopperVisible();
  }
  function cancel() {
    emit("update:visible", false);
    emit("update:isedit", false);
    resetForm(); // 重置表单

    emit("chananniu", "");
  }

  // 获取表单引用
  const queryForm = ref(null);
  function submitForm() {
    // const tmp = props.edit_info ? Departmentedit : createDepartment;
    queryForm.value.validate(valid => {
      if (valid) {
        delete formObj.value.laborTypename;
        const data = {
          ...formObj.value,
          sex: Number(formObj.value.sex),
          id: props.infoid ? props.infoid : "",
        };
        if (!props.infoid) {
          delete data.id;
        }

        const tmp = props.iswanshan ? save_info : saveyuangong;
        tmp(data)
          .then(res => {
            ElMessage({
              message: res.msg,
              grouping: true,
              type: "success",
            });
            emit("update:visible", false);
            emit("update:isedit", false);
            resetForm(); // 重置表单
            emit("success", "");
            emit("chananniu", "");
          })
          .catch(err => {
            ElMessage({
              message: err,
              grouping: true,
              type: "error",
            });
          });
      } else {
        console.log("表单验证失败");
        return false;
      }
    });
  }
</script>

<style lang="scss" scoped>
.dialog_height {
  overflow: hidden !important;
}

::v-deep .el-radio.el-radio--small .el-radio__label {
  font-size: 14px;
}

// ::v-deep .el-form-item__label,
// .el-form-item__content {
//   font-size: 15px;
//   /* 调整为你需要的字体大小 */
// }

.boardBox {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  max-height: calc(100vh - 210px);

  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;

  .tishi {
    font-size: 14px;
    color: #999;
    background-color: #f3f8fb;
    padding: 5px 10px;
    border-radius: 6px;
  }

  .dialog_header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .dialog_header_title {
    font-size: 16px;
    color: #01509f;
    background: url(@/assets/image/cf/img01.png) no-repeat left center;
    background-size: 24px 18px;
    padding-left: 30px;
    line-height: 30px;
  }

  .dialog_header_title2 {
    font-size: 16px;
    color: #01509f;
    background: url(@/assets/image/cf/img02.png) no-repeat left center;
    background-size: 22px 20px;
    padding-left: 30px;
    line-height: 30px;
  }

  .dialog_header_title3 {
    font-size: 16px;
    color: #01509f;
    background: url(@/assets/image/cf/img03.png) no-repeat left center;
    background-size: 22px 14px;
    padding-left: 30px;
    line-height: 30px;
  }

  .dialog_header_title4 {
    font-size: 16px;
    color: #01509f;
    background: url(@/assets/image/cf/img04.png) no-repeat left center;
    background-size: 22px 16px;
    padding-left: 30px;
    line-height: 30px;
  }
}

::v-deep .el-form-item__label {
  font-size: 16px !important;
}

.el-form-item {
  margin-bottom: 0px !important;
}
</style>
